<template>
	<view class="page">
		<!-- 顶部切换卡 -->
		<view class="tab-bar">
			<view 
				v-for="(tab, index) in tabs" 
				:key="index"
				class="tab-item"
				:class="{ active: activeTab === index }"
				@click="switchTab(index)"
			>
				<text class="tab-text" :class="{ active: activeTab === index }">{{ tab }}</text>
				<view class="tab-line" v-if="activeTab === index"></view>
			</view>
		</view>
		
		<!-- 车辆列表 -->
		<ul class="car-list">
			<li v-for="(item, index) in currentList" :key="index" @click="goDetail(item)">
				<image :src="item.image" mode="widthFix"></image>
				<div class="car-right">
					<p class="car-name">{{ item.name }}</p>
					<p class="car-info">VIN: {{ item.vin }}</p>
					<p class="car-info">{{ item.plate }}</p>
				</div>
				<view class="right-column">
					<span class="iconfont icon-you"></span>
					<view class="tag" :class="item.type">{{ item.typeText }}</view>
				</view>
			</li>
		</ul>
		
		<!-- 无数据提示 -->
		<view v-if="currentList.length === 0" class="empty-tip">
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
import common_config from '@/static/js/common.js';
var config = common_config.config;
var userInfo;

export default {
	data() {
		return {
			tabs: ['待处理', '已完成'],
			activeTab: 0,
			
			// 待处理列表（测试数据）
			pendingList: [
				{
					id: 1,
					type: 'purchase',
					typeText: '采购',
					name: '宝马2024款325LiM套件版',
					vin: 'LMS66S5IDF368F65G',
					plate: '闽AJ565D2',
					image: 'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/yuanxiang/logo2.png'
				},
				{
					id: 2,
					type: 'sale',
					typeText: '销售',
					name: '宝马2024款325LiM套件版',
					vin: 'LMS66S5IDF368F65G',
					plate: '闽AJ565D2',
					image: 'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/yuanxiang/logo2.png'
				}
			],
			
			// 已完成列表（测试数据）
			completedList: [
				{
					id: 3,
					type: 'purchase',
					typeText: '采购',
					name: '特斯拉 Model 3 2023款',
					vin: 'LMS66S5IDF368F65H',
					plate: '闽BK123A4',
					image: 'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/yuanxiang/logo2.png'
				}
			]
		}
	},
	
	computed: {
		// 当前显示的列表
		currentList() {
			return this.activeTab === 0 ? this.pendingList : this.completedList;
		}
	},
	
	onLoad() {
		// 初始化用户信息
		this.initUser();
	},
	
	methods: {
		// 初始化用户信息
		initUser() {
			common_config.common_if_login(
				() => {
					// 未登录
					uni.showToast({
						title: '请先登录',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/login'
						});
					}, 1500);
				},
				() => {
					// 已登录
					userInfo = uni.getStorageSync('userInfo');
					try {
						userInfo = JSON.parse(userInfo);
					} catch(e) {}
					
					// 加载数据
					// this.loadData();
				}
			);
		},
		
		// 加载数据
		loadData() {
			
			// 请求待处理数据
			uni.request({
				url: config.request_url + '/index/business/closed_loop_list?token=' + (userInfo?.token || ''),
				method: 'POST',
				header: { 'Content-Type': 'application/x-www-form-urlencoded' },
				data: {
					status: 0  // 0=待处理
				},
				success: (res) => {
					const r = res.data || {};
					if (r.code == 200) {
						// 处理待处理列表数据
						this.pendingList = this.formatList(r.data?.list || []);
					} else {
						common_config.calert(r.msg || '加载失败');
					}
				},
				fail: () => {
					common_config.calert('网络异常');
				}
				// ,
				// complete: () => {
				// 	// 继续请求已完成数据
				// 	this.loadCompletedData();
				// }
			});
		},
		
		// 加载已完成数据
		loadCompletedData() {
			uni.request({
				url: config.request_url + '/index/business/closed_loop_list?token=' + (userInfo?.token || ''),
				method: 'POST',
				header: { 'Content-Type': 'application/x-www-form-urlencoded' },
				data: {
					status: 1  // 1=已完成
				},
				success: (res) => {
					const r = res.data || {};
					if (r.code == 200) {
						// 处理已完成列表数据
						this.completedList = this.formatList(r.data?.list || []);
					} else {
						common_config.calert(r.msg || '加载失败');
					}
				},
				fail: () => {
					common_config.calert('网络异常');
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		
		// 格式化列表数据
		formatList(list) {
			return list.map(item => {
				return {
					id: item.id,
					type: item.type,  // 'purchase' 或 'sale'
					typeText: item.type === 'purchase' ? '采购' : '销售',
					name: item.car_name || '',
					vin: item.vin || '',
					plate: item.plate_no || '',
					image: item.car_image || 'https://kehu-1256834579.cos.ap-shanghai.myqcloud.com/yuanxiang/logo2.png'
				};
			});
		},
		
		// 切换标签
		switchTab(index) {
			this.activeTab = index;
		},
		
		// 跳转详情页
		goDetail(item) {
			// 根据当前tab状态跳转不同页面
			if (this.activeTab === 0) {
				// 待处理 - 跳转到材料补充页面
				uni.navigateTo({
					url: '/pages/business/material_supplement?id=' + item.id + 
					     '&car_name=' + encodeURIComponent(item.name) +
					     '&vin=' + encodeURIComponent(item.vin) +
					     '&plate=' + encodeURIComponent(item.plate) +
					     '&image=' + encodeURIComponent(item.image) +
					     '&type=' + item.type
				});
			} else {
				// 已完成 - 跳转到材料审核页面
				uni.navigateTo({
					url: '/pages/business/material_review?id=' + item.id + 
					     '&car_name=' + encodeURIComponent(item.name) +
					     '&vin=' + encodeURIComponent(item.vin) +
					     '&plate=' + encodeURIComponent(item.plate) +
					     '&image=' + encodeURIComponent(item.image) +
					     '&type=' + item.type
				});
			}
		}
	}
}
</script>

<style scoped>
page {
	background-color: #f4f4f4;
	height: 100%;
}

.page {
	background-color: #f4f4f4;
	min-height: 100vh;
}

/* 顶部切换卡 - 靠左对齐，不均分 */
.tab-bar {
	display: flex;
	background-color: transparent;
	padding: 0 3%;
}

.tab-item {
	padding: 30rpx 40rpx;
	position: relative;
	cursor: pointer;
}

.tab-text {
	font-size: 28rpx;
	color: #666;
	transition: all 0.3s ease;
}

.tab-text.active {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
}

.tab-line {
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60rpx;
	height: 6rpx;
	background-color: #3478F6;
	border-radius: 3rpx;
}

/* 车辆列表 */
.car-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.car-list li {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 16rpx;
	padding: 20rpx;
	margin: 20rpx 3%;
	width: 94%;
	box-sizing: border-box;
	position: relative;
}

.car-list li image {
	width: 200rpx;
	height: auto;
	border-radius: 8rpx;
	flex-shrink: 0;
}

.car-right {
	flex: 1;
	margin-left: 20rpx;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.car-name {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	line-height: 1.4;
	margin: 0 0 8rpx 0;
	word-break: break-all;
}

.car-info {
	font-size: 24rpx;
	color: #999;
	line-height: 1.6;
	margin: 0;
}

/* 右侧列 - 箭头和标签 */
.right-column {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	margin-left: 10rpx;
}

.right-column .iconfont {
	font-size: 48rpx;
	color: #ddd;
	margin-bottom: auto;
}

/* 类型标签 - 右下角 */
.tag {
	font-size: 24rpx;
	color: #fff;
	border-radius: 6rpx;
	padding: 4rpx 12rpx;
	white-space: nowrap;
	margin-top: auto;
}

.tag.purchase {
	background-color: #FF9500;
}

.tag.sale {
	background-color: #FF3B30;
}

/* 无数据提示 */
.empty-tip {
	text-align: center;
	padding: 150rpx 0;
	color: #999;
	font-size: 28rpx;
}
</style>

